<style lang="stylus">
@import "../style/login.styl"
.login
  .register-hint
    position absolute
    width 100%
    bottom 80px
</style>

<template lang="pug">
.login
  .back.fz-34.white.flex(@click="onCheckBack") 返回
  .center.fz-34.white {{isAccountLogin ? '账号密码登录': '手机验证码登录'}}
  .logo
  .login-wrapper.bg-white.pd-40
    .input-wrapper.gray-99.fz-30.pdh-30.flex
      input.flex-1(placeholder='请输入11位手机号码', maxlength='11', v-model="phone")
      span.input-close.inline-block.mgl-30(v-show="phone.length", @click="phone=''")
    .input-wrapper.gray-99.fz-30.pdh-30.flex.mgt-30(v-show="isAccountLogin")
      input.flex-1(type='password', placeholder='请输入密码', maxlength='30', v-model="password")
      span.input-close.inline-block.mgl-30(v-show="password.length", @click="password=''")
    .input-wrapper.gray-99.fz-30.pdh-30.flex.mgt-30(v-show="!isAccountLogin")
      .flex-1.flex
        input.code-input.flex-1(placeholder='请输入验证码', maxlength='10', v-model="code")
        span.input-close.inline-block.mgl-30(v-show="code.length", @click="code=''")
      .fz-30.get-code.blue.center.bg-white.mgl-20(@click="getCode(SCENARIO_TYPE.LOGIN)") {{countDown ? codeMsg: '获取验证码'}}
    .flex.mgt-70
      .fz-28(@click="toggleLogin") {{isAccountLogin ? '手机验证码登录': '账号密码登录'}}
      .flex-1
      .fz-28(@click="onFindPassword") 忘记密码？
    .btn.white.fz-36.center(@click="onLogin") 登录
  .register-hint.fz-26.center(v-show="showHint")
    span.gray-99 还没有账号？
    span.blue(@click="goRegister") 立即注册
</template>

<script>
import loginMixin from '../mixin/login'

export default {
  name: 'login',
  mixins: [loginMixin],
  data() {
    return {
      isAccountLogin: true,
      showHint: true
    }
  },

  mounted() {
    const winHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    window.addEventListener('resize', () => {
      const currentHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
      const showHint = winHeight - currentHeight <= 100
      if (showHint !== this.showHint) {
        this.showHint = showHint
      }
    }, false)
  },

  methods: {
    toggleLogin() {
      this.isAccountLogin = !this.isAccountLogin
      this.code = ''
      this.password = ''
    },

    goRegister() {
      this.$router.push('/register')
    },

    onFindPassword() {
      this.$router.push({
        path: '/find-password',
        query: { type: 'find' }
      })
    },

    onLogin() {
      if (this.checkPhone()) {
        if (this.isAccountLogin) {
          this.$get('user/login', {
            account: this.phone,
            password: this.password
          }).then(this.loginSuccessCallback.bind(this))
        } else {
          this.$get('user/loginBySmsCode', {
            account: this.phone,
            smsCode: this.code
          }).then(this.loginSuccessCallback.bind(this))
        }
      }
    },

    loginSuccessCallback(user) {
      this.user = user
      this.userId = user.userId
      this.saveStore('user', user)
      if (this.config.env.isApp) {
        this.action('userLogin', user)
      }
      this.onGoHome()
    },

    onGoHome() {
      if (this.config.env.isApp) {
        this.action('closeWin')
      } else {
        this.$router.replace('/home')
      }
    },

    onCheckBack() {
      if (this.config.env.isApp) {
        this.action('goback')
      } else {
        this.onBack()
      }
    }
  }
}
</script>
